<template>
  <div class="order-list-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>入住订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>入住订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="home-page"
      ref="wrap">
      <section>
        <h1>订单信息</h1>
        <div class="content">
          <el-row class="box">
            <el-col :span="12">
              <label>订单来源</label>{{orderParticulars.source}}
            </el-col>
            <el-col :span="12">
              <label>付款方式</label>{{orderParticulars.paymentMode}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>订单号</label>{{orderParticulars.orderNum}}
            </el-col>
            <el-col :span="12">
              <label>实付订单金额</label>{{orderParticulars.orderMoney}}(已付)
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>会员折扣</label>{{orderParticulars.discount}}
            </el-col>
            <el-col :span="12">
              <label>优惠</label>{{orderParticulars.discounts}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>订单状态</label>{{orderParticulars.stateCN}}
              <span v-if="orderParticulars.serviceMoney">(收取手续费￥{{orderParticulars.serviceMoney}})</span>
            </el-col>
            <el-col :span="12">
              <label>下单时间</label>{{orderParticulars.createTime}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>预订人</label>{{orderParticulars.reserve}}
            </el-col>
            <el-col :span="12">
              <label>预定人电话</label>{{orderParticulars.reservePhone}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>预计到店时间</label>{{orderParticulars.liveMinute}}
            </el-col>
            <el-col :span="12">
              <label>推荐人</label>{{referrer.name}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>奖金金额</label>{{referrer.sellMoney}}
            </el-col>
          </el-row>
        </div>
      </section>
      <section>
        <h1>入住信息</h1>
        <div class="content"
          v-for="(item,index) in orderLiveInfoList"
          :key="index">
          <el-row class="box">
            <el-col :span="12">
              <label>房型</label>{{item.room}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>床型</label>{{item.bedType}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住状态</label>{{item.stateCN}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住房号</label>{{item.checkInRoomNum}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入住人</label>{{item.liveName}}
            </el-col>
          </el-row>
           <el-row class="box">
            <el-col :span="12">
              <label>身份证号</label>{{item.identityCard}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>联系电话</label>{{item.stayMobile}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>入离时间</label>
              <span>{{item.inFromTime}}</span>
              <span v-for="i in item.checkRenewList"
                :key="i.id"
                class="renewTime">
                {{i.renewTime}}续房{{i.dayNum}}天
              </span>
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="24">
              <label class="fl">每日房价</label>
              <div class="fl"
                style="width:85%;font-size:12px">
                <p v-for="(subItem,i) in item.prices"
                  :key="i"
                  class="dayPrice fl"
                  style="margin-bottom:15px;">
                  {{subItem.date}}&nbsp;&nbsp;({{subItem.weekOfDate}})&nbsp;&nbsp;￥{{subItem.salePrice}}
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="account-info">
        <h1>账单信息</h1>
        <el-table style="width: 70%"
          :data="checkInList">
          <el-table-column prop="num"
            label="账单号"
            min-width="200">
          </el-table-column>
          <el-table-column label="房号"
            width="125"
            min-width="150"
            prop="roomNum">
          </el-table-column>
          <el-table-column label="押金"
            width="125"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.deposit}}({{scope.row.depositType}})
            </template>
          </el-table-column>

          <el-table-column label="总消费"
            min-width="400"
            prop="moneySum">
          </el-table-column>
          <el-table-column label="商品详情"
            min-width="100">
            <template slot-scope="scope">
              <el-button @click.native.prevent="goodsDetail(scope.row.checkOrderList)"
                type="text"
                size="small">
                查看
              </el-button>
              <el-button type="text"
                size="small"
                @click.native.prevent="get_voucher(scope.row.buildingRoomId)">导出凭证</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p class="totlePrice">合计：
          <span style="font-size:12px">{{checkOrderMoneySum}}元(已付：{{orderPaid.paid}}元，未付：{{orderPaid.unpaid}}元)</span>
        </p>
      </section>
      <section>
        <h1>入住日志</h1>
        <el-row class="box">
          <el-col :span="17">
            <el-table :data="orderLogbookS"
              style="width: 100%"
              min-height="150">
              <el-table-column prop="numbering"
                label="编号"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationTime"
                label="操作时间"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationPerson"
                label="操作人"
                min-width="150">
              </el-table-column>
              <el-table-column prop="operationDescribe"
                label="操作描述"
                min-width="150">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </section>
      <section>
        <h1>酒店信息</h1>
        <div class="content">
          <el-row class="box">
            <el-col :span="12">
              <label>酒店名称</label>{{orderHotelInfo.name}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>酒店电话</label>{{orderHotelInfo.mobile}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>酒店地址</label>{{orderHotelInfo.address}}
            </el-col>
          </el-row>
        </div>
      </section>
    </div>
    <!-- 账单缴费凭证弹窗 -->
    <el-dialog title="凭证"
      :visible.sync="dialog_account_print"
      width="80%"
      center>
      <div class="account-content"
        id="pdfDom">
        <div class="account-title">长沙兴威华天酒店结账凭证</div>
        <div class="top-1">
          <div>
            <span>单号：{{voucher.bills}}</span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="top-1"
          style="border:none">
          <div>
            <span>房号：{{voucher.roomNum}}</span>
            <span>姓名：{{voucher.person}}</span>
            <span>手机号码：{{voucher.phone}}</span>
            <span></span>
          </div>
          <div>
            <span>入住时间：{{voucher.liveTime}}</span>
            <span>离店时间：{{voucher.leaveTime}}</span>
            <span>住宿天数：{{voucher.dayNum}}</span>
            <span>操作员：{{voucher.operator}}</span>
          </div>
          <div>
            <span>备注：{{voucher.remark}}</span>
          </div>
        </div>
        <ul class="list">
          <li class="header">
            <span>房号</span>
            <span>项目</span>
            <span>消费</span>
            <span>预付</span>
            <span>入账时间</span>
          </li>
          <li v-for="item in voucher.checkOrderList"
            :key="item.checkOrderId">
            <span>{{item.roomName}}</span>
            <span>{{item.name}}</span>
            <span>{{item.money}}</span>
            <span>{{item.getMoney}}</span>
            <span>{{item.accoutTime}}</span>
          </li>
          <li class="footer"
            style="border-bottom:2px solid #000">
            <span>合计：</span>
            <span></span>
            <span>{{voucher.moneySum}}</span>
            <span>{{voucher.getMoneySum}}</span>
            <span></span>
          </li>
          <li class="footer">
            <span>余额：{{voucher.surplusMoney}}</span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </li>
          <li class="end"
            style="padding-top:30px;">
            <span>客户签名：</span>
            <span style="text-align:right">时间：{{nowTime}}</span>
          </li>
        </ul>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click.stop="dialog_account_print = false">取 消</el-button>
        <el-button type="primary"
          @click="getPdf()">导出</el-button>
      </span>
    </el-dialog>
    <!-- 商品详情弹窗 -->
    <el-dialog title="商品详情"
      :visible.sync="dialog_goodList"
      width="50%"
      center>
      <div class="goodsList-content">
        <el-table :data="checkOrderList"
          style="width: 95%"
          min-height="150">
          <el-table-column prop="name"
            label="商品名称"
            min-width="150">
          </el-table-column>
          <el-table-column prop="num"
            label="商品数量"
            min-width="150">
          </el-table-column>
          <el-table-column prop="money"
            label="价格"
            min-width="80">
          </el-table-column>
          <el-table-column prop="payType"
            label="收款方式"
            min-width="80">
          </el-table-column>
          <el-table-column prop="getMoney"
            label="收款金额"
            min-width="150">
          </el-table-column>
          <el-table-column prop="accoutTime"
            label="入账时间"
            min-width="150">
          </el-table-column>
          <el-table-column prop="operator"
            label="操作员"
            min-width="100">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click.stop="dialog_goodList = false">关闭</el-button>
      </span>
    </el-dialog>
    <div class="information-btns"
      :style="{width:width}">
      <el-button @click="back"
        size="small">返回</el-button>
    </div>
  </div>
</template>
<script>
import { getCheckDetail, getVoucher } from "@/public/js/check";
import { format } from "@/public/js/util.js";
import html2Canvas from "html2Canvas";
const Breadcrumb = () => import("@/components/common/Breadcrumb");

export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      source: "全部来源",
      date: "全部日期",
      state: "",
      content: {
        firstTitle: "入住",
        secondTitle: "入住详情",
        type: "close"
      },
      width: "",
      orderParticulars: {},
      orderHotelInfo: {},
      orderLiveInfoList: {},
      orderLogbookS: [],
      dialog_account_print: false,
      dialog_goodList: false,
      checkInList: [],
      checkOrderMoneySum: "",
      checkOrderList: [],
      voucher: "",
      buildingRoomId: "",
      referrer: {},
      orderPaid: "",
      nowTime: format(new Date().getTime(), "yyyy-MM-dd hh:mm:ss")
    };
  },
  watch: {
    $route(to, from) {
      this.getCheckInfo();
    }
  },
  created() {
    this.getCheckInfo();
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  },
  methods: {
    back() {
      this.$router.back();
    },
    // 获取入住详情数据
    getCheckInfo() {
      getCheckDetail({
        checkInId: this.$route.query.id
      }).then(res => {
        if (!res.data.errCode) {
          console.log(res.data);
          this.orderParticulars = res.data.orderParticulars;
          this.orderHotelInfo = res.data.orderHotelInfo;
          this.orderLiveInfoList = res.data.orderLiveInfoList;
          this.orderLogbookS = res.data.orderLogbookS;
          this.checkInList = res.data.checkInList;
          this.checkOrderMoneySum = res.data.checkOrderMoneySum;
          this.referrer = res.data.referrer ? res.data.referrer : {};
          this.orderPaid = res.data.orderPaid;
        }
      });
    },
    getPdf: function() {
      html2Canvas(document.querySelector("#pdfDom"), {
        allowTaint: true
      }).then(function(canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = contentWidth / 392.28 * 641.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 395.28;
        let imgHeight = 392.28 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let PDF = new jsPDF("", "pt", "a3");
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        let time = Date.parse(new Date());
        PDF.save(time + ".pdf");
      });
    },
    //查看商品详情
    goodsDetail(val) {
      console.log(val);
      this.dialog_goodList = true;
      this.checkOrderList = val;
    },
    // 凭证
    get_voucher(buildingRoomId) {
      this.dialog_account_print = true;
      console.log(buildingRoomId);
      getVoucher({
        buildingRoomId: buildingRoomId
      }).then(res => {
        if (!res.data.errCode) {
          this.voucher = res.data;
          console.log(this.voucher);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#home-page {
  font-size: 14px;
  padding: 0 30px 60px 30px;
  h1 {
    font-size: 16px;
    text-align: left;
    color: #6d2377;
    padding: 15px 0;
  }
  section {
    border-bottom: 1px solid #f6f6f6;
    .content {
      padding: 20px 0 10px 20px;
      .box {
        padding-bottom: 15px;
        label {
          margin-right: 25px;
          width: 100px;
          text-align: right;
          display: inline-block;
          font-weight: bold;
        }
        .renewTime {
          border: 1px solid #6d2377;
          padding: 8px;
          border-radius: 3px;
          margin-left: 10px;
        }
        .dayPrice {
          margin-right: 15px;
          border: 1px solid #6d2377;
          padding: 8px;
          border-radius: 3px;
        }
      }
    }
    &.account-info {
      .totlePrice {
        padding-top: 15px;
      }
    }
  }
}
.account-content {
  color: #000;
  width: 1000px;
  margin: 0 auto;
  .account-title {
    font-family: "MicrosoftJhengHei";
    font-size: 18px;
    text-align: center;
    padding-bottom: 12px;
  }
  .top-1 {
    line-height: 28px;
    border-bottom: 2px solid #000;
    padding-left: 10px;
    & > div {
      display: flex;
      & > span {
        flex: 1;
      }
    }
  }
  .list {
    text-indent: 30px;
    li {
      display: flex;
      & > span {
        flex: 1;
      }
      &.header {
        border-bottom: 2px solid #000;
      }
    }
  }
}
.goodsList-content {
  .el-table th {
    background: #fff !important;
  }
}
</style>
